﻿import QtQuick 2.4
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.13

Item {
    id: sendReceiveForm
    property alias sendEdit: sendEdit
    property alias receiveEdit: receiveEdit
    property alias sendBtn: sendBtn
    property alias comboBoxTxCharset: comboBoxTxCharset
    property alias comboBoxLineBreakType: comboBoxLineBreakType
    property alias comboBoxRxCharset: comboBoxRxCharset
    property alias element: element
    property alias labelTxByteCount: labelTxByteCount
    property alias labelRxByteCount: labelRxByteCount

    Column {
        anchors.fill: parent
        ScrollView {
            width: parent.width
            height: parent.height - areaRxTxStatus.height - areaSend.height
            //anchors.top: parent.top
            //anchors.bottom: areaSend.top
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            TextArea {
                id: receiveEdit
                //anchors.fill: parent
                wrapMode: TextArea.WrapAnywhere
                placeholderText: qsTr("接收数据显示区域")
                text: ""
            }
        }
        // 边框
        Rectangle {
            id: areaRxTxStatus
            border.color: "black"
            border.width: 1
            width: parent.width
            height: 16
            // 使用矩形覆盖其他边框
            Rectangle {
                color: parent.color
                border.width: 0
                anchors.fill: parent
                anchors.topMargin: 1
                anchors.rightMargin: 0
                anchors.bottomMargin: 0
                anchors.leftMargin: 0
            }
            Row {
                width: parent.width
                height: parent.height - 1
                anchors.bottom: parent.bottom
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: " 接收类型:"
                }
                ComboBox {
                    id: comboBoxRxCharset
                    enabled: true
                    width: 70
                    height: parent.height
                    currentIndex: 1
                    model: ListModel {
                        //id: model
                        ListElement {
                            text: qsTr("HEX")
                        }
                        ListElement {
                            text: qsTr("GBK")
                        }
                        ListElement {
                            text: qsTr("UTF8")
                        }
                        ListElement {
                            text: qsTr("UNICODE")
                        }
                    }
                    delegate: ItemDelegate {
                        width: comboBoxRxCharset.width
                        height: comboBoxRxCharset.height * 2
                        contentItem: Text {
                            text: modelData
                            opacity: enabled ? 1.0 : 0.3
                            color: "#21be2b"
                            font: comboBoxRxCharset.font
                            //elide: Text.ElideRight
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                        }
                        highlighted: comboBoxRxCharset.highlightedIndex === index
                    }
                    contentItem: Text {
                        id: element
                        text: comboBoxRxCharset.displayText
                        font: comboBoxRxCharset.font
                        opacity: enabled ? 1.0 : 0.3
                        color: comboBoxRxCharset.pressed ? "#17a81a" : "#21be2b"
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        //elide: Text.ElideRight
                    }
                    background: Rectangle {
                        opacity: enabled ? 1.0 : 0.3
                        border.color: comboBoxRxCharset.pressed ? "#17a81a" : "#21be2b"
                        border.width: comboBoxRxCharset.visualFocus ? 2 : 1
                        radius: 2
                    }
                    indicator: Item {
                        // 取消显示indicator
                        width: 0
                        height: 0
                    }
                }
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: "  "
                }
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: "TX: "
                }
                Label {
                    id: labelTxByteCount
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    color: "#21be2b"
                    text: "0"
                }
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: " Bytes"
                }
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: "  "
                }
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: "RX: "
                }
                Label {
                    id: labelRxByteCount
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    color: "#21be2b"
                    text: "0"
                }
                Label {
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                    text: " Bytes"
                }
            }
        }
        Rectangle {
            id: areaSend
            border.color: "black"
            border.width: 1
            //anchors.bottom: parent.bottom
            //anchors.left: parent.left
            //anchors.right: parent.right
            width: sendReceiveForm.width
            height: rowSend.implicitHeight + 1
            // 使用矩形覆盖其他边框
            Rectangle {
                color: parent.color
                border.width: 0
                anchors.fill: parent
                anchors.topMargin: 1
                anchors.rightMargin: 0
                anchors.bottomMargin: 0
                anchors.leftMargin: 0
            }
            Row {
                id: rowSend
                //anchors.fill: parent
                anchors.bottom: parent.bottom
                anchors.topMargin: 1
                ScrollView {
                    width: sendReceiveForm.width - sendBtn.width
                    height: columnSendCtrl.implicitHeight
                    //ScrollBar.vertical.policy: ScrollBar.AlwaysOn
                    TextArea {
                        id: sendEdit
                        //anchors.rightMargin: 6
                        text: qsTr("")
                        placeholderText: "发送数据区域，长按发送按钮连续发送"
                        //width: sendReceiveForm.width - sendBtn.implicitWidth
                        textFormat: TextEdit.PlainText
                        wrapMode: TextArea.WrapAnywhere
                    }
                    background: Rectangle {
                        border.color: "black"
                        border.width: 1
                        anchors.fill: parent
                        // 使用矩形覆盖其他边框
                        Rectangle {
                            color: parent.color
                            border.width: 0
                            anchors.fill: parent
                            anchors.topMargin: 0
                            anchors.rightMargin: 1
                            anchors.bottomMargin: 0
                            anchors.leftMargin: 0
                        }
                    }
                }
                Column {
                    id: columnSendCtrl
                    spacing: 1
                    Button {
                        id: sendBtn
                        text: qsTr("发送")
                        autoRepeat: true
                        width: sendBtn.implicitWidth * 0.8
                        //enabled: btSocket.connected
                        contentItem: Text {
                            text: sendBtn.text
                            font: sendBtn.font
                            opacity: enabled ? 1.0 : 0.3
                            color: sendBtn.down ? "#17a81a" : "#21be2b"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight
                        }
                        background: Rectangle {
                            implicitWidth: 100
                            implicitHeight: 40
                            opacity: enabled ? 1 : 0.3
                            border.color: sendBtn.down ? "#17a81a" : "#21be2b"
                            border.width: 1
                            radius: 2
                        }
                    }
                    ComboBox {
                        id: comboBoxTxCharset
                        width: sendBtn.width
                        height: sendBtn.height * 0.7
                        currentIndex: 1
                        model: ListModel {
                            //id: model
                            ListElement {
                                text: qsTr("HEX")
                            }
                            ListElement {
                                text: qsTr("GBK")
                            }
                            ListElement {
                                text: qsTr("UTF8")
                            }
                            ListElement {
                                text: qsTr("UNICODE")
                            }
                        }
                        delegate: ItemDelegate {
                            width: comboBoxTxCharset.width
                            height: comboBoxTxCharset.height
                            contentItem: Text {
                                text: modelData
                                opacity: enabled ? 1.0 : 0.3
                                color: "#21be2b"
                                font: comboBoxTxCharset.font
                                //elide: Text.ElideRight
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                            }
                            highlighted: comboBoxTxCharset.highlightedIndex === index
                        }
                        contentItem: Text {
                            text: comboBoxTxCharset.displayText
                            font: comboBoxTxCharset.font
                            opacity: enabled ? 1.0 : 0.3
                            color: comboBoxTxCharset.pressed ? "#17a81a" : "#21be2b"
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            //elide: Text.ElideRight
                        }
                        background: Rectangle {
                            opacity: enabled ? 1.0 : 0.3
                            border.color: comboBoxTxCharset.pressed ? "#17a81a" : "#21be2b"
                            border.width: comboBoxTxCharset.visualFocus ? 2 : 1
                            radius: 2
                        }
                        indicator: Item {
                            // 取消显示indicator
                            width: 0
                            height: 0
                        }
                    }
                    ComboBox {
                        id: comboBoxLineBreakType
                        enabled: comboBoxTxCharset.currentIndex != 0
                        width: sendBtn.width
                        height: sendBtn.height * 0.7
                        currentIndex: 0
                        model: ListModel {
                            //id: model
                            ListElement {
                                text: qsTr("\\r\\n")
                            }
                            ListElement {
                                text: qsTr("\\n")
                            }
                        }
                        delegate: ItemDelegate {
                            width: comboBoxLineBreakType.width
                            height: comboBoxLineBreakType.height
                            contentItem: Text {
                                text: modelData
                                opacity: enabled ? 1.0 : 0.3
                                color: "#21be2b"
                                font: comboBoxLineBreakType.font
                                //elide: Text.ElideRight
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                            }
                            highlighted: comboBoxLineBreakType.highlightedIndex === index
                        }
                        contentItem: Text {
                            text: comboBoxLineBreakType.displayText
                            font: comboBoxLineBreakType.font
                            opacity: enabled ? 1.0 : 0.3
                            color: comboBoxLineBreakType.pressed ? "#17a81a" : "#21be2b"
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            //elide: Text.ElideRight
                        }
                        background: Rectangle {
                            opacity: enabled ? 1.0 : 0.3
                            border.color: comboBoxLineBreakType.pressed ? "#17a81a" : "#21be2b"
                            border.width: comboBoxLineBreakType.visualFocus ? 2 : 1
                            radius: 2
                        }
                        indicator: Item {
                            // 取消显示indicator
                            width: 0
                            height: 0
                        }
                    }
                }
            }
        }
    }
}




/*##^## Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
 ##^##*/
